<template>
	<view class="wrap">
		<form>
			<view class="form_item_h">
				<view class="h" style="width: 70%;">
					工单详情
				</view>
				<view style="width: 20%;text-align: end;"
					:style="item.workState==1?'color:#19be6b':item.workState==2?'color:#19be6b':item.workState==3?'color:#ff6d00':item.workState==4?'color:#ff6d00':item.workState==5?'color:#ff0200':item.workState==6?'color:#777':item.workState==6?'color:#777':item.workState==6?'color:#19be6b':''">
					{{item.workState==1?'待处理':item.workState==2?'处理中':item.workState==3?'处理完毕':item.workState==4?'验收中':item.workState==5?'验收驳回':item.workState==6?'终止':item.workState==7?'工单撤回':item.workState==8?'验收完毕':''}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>工单编号</text>
				</view>
				<view class="input">
					{{list.workNum}}
				</view>
			</view>
			<!-- <view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>合同名称</text>
				</view>
				<view class="input">
					{{list.contractName}}
				</view>
			</view> -->
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>申请人</text>
				</view>
				<view class="input">
					{{list.createBy}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>申请日期</text>
				</view>
				<view class="input">
					{{list.createTime}}
				</view>
			</view>
			<view class="form_item">
				<view class="label">
					<text class="label_text"></text><text>当前受理人</text>
				</view>
				<view class="input">
					{{list.updateBy}}
				</view>
			</view>

			<view style="margin: 30rpx 0;">
				<uni-steps :options="steps" active-color="#ff5a00" :active="active" direction="column" />
			</view>
			<view style="width: 100%;height: 11vh;"></view>
		</form>
		<!-- <view class="fixed" style="display: flex;" v-if="permission!=1">
			<view class="btn" style="background: #ff0000ed;margin-left: 0;" @click="fun(2)">驳回</view>
			<view class="btn" style="background: #ff5a00;margin-left: 40rpx;" @click="fun(1)">同意</view>
		</view> -->
	</view>
</template>

<script module="utils" lang="wxs" src="../../utils/imgSrc.wxs"></script>

<script>
	import config from '../../config.js';

	import {
		throttle
	} from "@/utils/throttle.js"

	export default {
		data() {
			return {
				permission: uni.getStorageSync('permission'),
				steps: [],
				list: [],
				active: 0,
				data: [{
					"refundLogId": null,
					"refundId": "1730037124382281728",
					"postCode": "0",
					"createDept": null,
					"createBy": null,
					"createTime": "2023-11-30 09:32:48",
					"trialName": null,
					"trialOrd": null,
					"deptName": "科技公司",
					"contractForm": "1",
					"contractPhone": "13142884534",
					"endTime": "2024-05-30 00:00:00",
					"contractDeposit": "1180.0",
					"contractName": "逸居观泉路店 - 310",
					"nickName": "小于",
					"unitName": null,
					"cardName": "朱伟清",
					"postName": "无",
					"result": "2"
				}, {
					"refundLogId": null,
					"refundId": "1730037124382281728",
					"postCode": "dianzhang",
					"createDept": null,
					"createBy": null,
					"createTime": "2023-11-30 09:35:02",
					"trialName": null,
					"trialOrd": null,
					"deptName": "运营部",
					"contractForm": "1",
					"contractPhone": "13142884534",
					"endTime": "2024-05-30 00:00:00",
					"contractDeposit": "1180.0",
					"contractName": "逸居观泉路店 - 310",
					"nickName": "appusr",
					"unitName": null,
					"cardName": "朱伟清",
					"postName": "店长",
					"result": "1"
				}, {
					"refundLogId": null,
					"refundId": "1730037124382281728",
					"postCode": "user",
					"createDept": null,
					"createBy": null,
					"createTime": "2023-11-30 09:45:10",
					"trialName": null,
					"trialOrd": null,
					"deptName": "科技公司",
					"contractForm": "1",
					"contractPhone": "13142884534",
					"endTime": "2024-05-30 00:00:00",
					"contractDeposit": "1180.0",
					"contractName": "逸居观泉路店 - 310",
					"nickName": "小于",
					"unitName": null,
					"cardName": "朱伟清",
					"postName": "普通员工",
					"result": "2"
				}, {
					"refundLogId": null,
					"refundId": null,
					"postCode": "dianzhang",
					"createDept": null,
					"createBy": null,
					"createTime": null,
					"trialName": "退房流程",
					"trialOrd": null,
					"deptName": null,
					"contractForm": null,
					"contractPhone": null,
					"endTime": null,
					"contractDeposit": null,
					"contractName": null,
					"nickName": null,
					"unitName": null,
					"cardName": null,
					"postName": "店长",
					"result": "审核中"
				}],
			};
		},
		methods: {
			// change() {
			// 	if (this.active < this.list1.length - 1) {
			// 		this.active += 1
			// 	} else {
			// 		this.active = 0
			// 	}
			// },
		},

		onLoad(option) {
			let data = {
				refundId: option.refundId
			}

			this.api.get('hetong/refundLog/app/selRefundLogById', data).then(res => {
				if (res.data.code == 200) {
					this.steps = res.data.data
					// this.steps = res.data.data
					for (let i = 0; i < res.data.data.length; i++) {
						let deptname = this.steps[i].deptName == null ? '' : this.steps[i].deptName
						let postname = this.steps[i].postName == null ? '' : this.steps[i].postName
						let nickname = this.steps[i].nickName == null ? '分配中' : this.steps[i].nickName

						this.$set(this.steps[i], 'title', deptname + ' ' + postname + ' ' + nickname)
						let des = this.steps[i].createTime


						this.$set(this.steps[i], 'desc', des)
					}

					// if (this.steps[this.steps.length - 1].deptName != null && this.steps[this.steps.length - 1]
					// 	.postName != null && this.steps[this.steps.length - 1].nickName != null) {
					// 	// 有下一步
					// 	this.active = this.steps.length - 2

					// } else {
					// 	// 没有下一步
					// 	this.active = this.steps.length - 1
					// 	this.$set(this.steps[this.active], 'desc', '待处理')
					// }

					this.active = this.steps.length - 1

					if (this.steps[this.active].createTime == null) {
						this.$set(this.steps[this.active], 'desc', '处理中')
					} else {
						this.$set(this.steps[this.active], 'desc', this.steps[this.active].createTime)
					}

					// if () {
					// 	this.active = res.data.data.length - 1
					// } else {
					// 	this.active = res.data.data.length - 2
					// }
				}
			})

			this.api.get('hetong/refund/app/selRefundIdById', data).then(res => {
				if (res.data.code == 200) {
					this.list = res.data.data
				}
			})


		},
		onShow() {

		},
		onReady() {

		},
		methods: {
			fun(item) {
				this.api.get('hetong/refund/app/selRefundIdById', item).then(res => {
					if (res.data.code == 200) {
						this.list = res.data.data
					}
				})
			}
		},
	};
</script>

<style lang="scss">
	.fixed {
		width: 100%;
		height: 10vh;
		background-color: white;
		position: fixed;
		bottom: 0;
	}

	.flex_most {
		width: 28rpx;
		height: 28rpx;
		margin-top: 5rpx;
	}

	.flex_logo {
		width: 28rpx;
		height: 28rpx;
		margin-top: 46rpx;
	}

	.logo {
		width: 80rpx;
		height: 80rpx;
		margin-top: 20rpx;
		margin-left: 310rpx;
	}

	.wrap {
		margin: 0 auto 54rpx;
		width: 718rpx;
	}

	.flex {
		display: flex;
		justify-content: flex-end;
	}

	.form_item_h {
		width: 718rpx;
		height: 40rpx;
		border-bottom: 1rpx solid #aaacba;
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		padding: 40rpx 0;
	}

	#submit {
		width: 660rpx;
		height: 112rpx;
		line-height: 112rpx;
		background: #ff6900;
		border-radius: 8rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		margin-top: 30rpx;
	}

	.gray_h {
		width: auto;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #AAACAB;
		line-height: 40rpx;
		margin: 34rpx 0 44rpx 24rpx;
		box-sizing: border-box;
	}

	textarea {
		width: 564rpx;
		height: 190rpx;
		border: 2rpx solid #F7F4F4;
		margin: 0 auto;
		font-size: 28rpx;
		font-weight: 400;
		color: #AAACAB;
		padding: 24rpx 38rpx 14rpx 38rpx;
	}

	.placeholder_textarea {
		font-size: 28rpx;
		font-weight: 400;
		color: #AAACAB;

	}

	.h {
		height: 48rpx;
		font-size: 34rpx;
		font-weight: 400;
		color: #1A1A1A;
		line-height: 48rpx;
		margin-left: 44rpx;
	}

	form {
		width: 718rpx;

		.form_item_logo {
			width: 718rpx;
			height: 120rpx;
			border-bottom: 1rpx solid #F7F4F4;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow: hidden;

			.label {
				width: 40%;
				height: 120rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
				line-height: 120rpx;

				.label_text {
					color: red;
					margin-left: 28rpx;
					margin-top: 16rpx;
					margin-right: 10rpx;
				}
			}

			.font_size {
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
			}

			.input {
				width: 55%;
				height: 120rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 120rpx;
				text-align: end;
			}

		}

		.uni-file-picker__container {
			display: flex;
			box-sizing: border-box;
			flex-wrap: wrap;
			margin: -5px;
			width: 660rpx;
			margin: 0 auto;
		}

		.from_file {
			width: 718rpx;
			height: 40rpx;
			border-bottom: 1rpx solid #F7F4F4;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow: hidden;
			padding: 40rpx 0 20rpx;

			.label {
				width: 40%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
				line-height: 40rpx;

				.label_text {
					color: red;
					margin-left: 28rpx;
					margin-top: 16rpx;
					margin-right: 10rpx;
				}
			}

			.input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}

			.font_size {
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
			}

			input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}
		}


		.form_item {
			width: 718rpx;
			height: 40rpx;
			border-bottom: 1rpx solid #F7F4F4;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow: hidden;
			padding: 40rpx 0;


			.label {
				width: 40%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
				line-height: 40rpx;

				.label_text {
					color: red;
					margin-left: 28rpx;
					margin-top: 16rpx;
					margin-right: 10rpx;
				}
			}

			.input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}

			.font_size {
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAB;
			}

			input {
				width: 55%;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: black;
				line-height: 40rpx;
				text-align: end;
			}
		}
	}

	.btn {
		border-radius: 100rpx;
		text-align: center;
		height: 7vh;
		line-height: 7vh;
		width: 45%;
		color: #f3f3f3;
		margin: 1.5vh 0 1.5vh 0;
		font-size: 30rpx;
	}
</style>